<template>
  <el-drawer v-model="drawerVisible" :destroy-on-close="true" size="450px">
    <template #header>
      <h4>{{ drawerProps.title }}物料群组</h4>
    </template>
    <template #default>
      <el-form
        ref="ruleFormRef"
        label-width="100px"
        label-suffix=" :"
        :rules="rules"
        :disabled="drawerProps.isView"
        :model="drawerProps.row"
        :hide-required-asterisk="drawerProps.isView"
      >
        <el-form-item label="群组编码" prop="groupCode">
          <el-input v-model="drawerProps.row!.groupCode" placeholder="请输入群组编码" clearable :disabled="drawerProps.title === '编辑'"></el-input>
        </el-form-item>
        <el-form-item label="群组名称" prop="groupName">
          <el-input v-model="drawerProps.row!.groupName" placeholder="请输入群组名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="群组类型" prop="groupType">
          <el-select v-model="drawerProps.row!.groupType" placeholder="请选择群组类型" clearable style="width: 100%">
            <el-option label="按物料类型" value="MATERIAL_TYPE" />
            <el-option label="按工艺属性" value="PROCESS_ATTR" />
            <el-option label="按业务属性" value="BUSINESS_ATTR" />
            <el-option label="按计价方式" value="PRICING_METHOD" />
          </el-select>
        </el-form-item>

        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="drawerProps.row!.status">
            <el-radio value="ACTIVE">启用</el-radio>
            <el-radio value="INACTIVE">禁用</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="描述" prop="description">
          <el-input
            v-model="drawerProps.row!.description"
            type="textarea"
            placeholder="请输入群组描述"
            :autosize="{ minRows: 3, maxRows: 6 }"
          ></el-input>
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <el-button @click="drawerVisible = false">取消</el-button>
      <el-button v-show="!drawerProps.isView" type="primary" @click="handleSubmit">确定</el-button>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { ElMessage, FormInstance } from "element-plus";
import { MaterialGroup } from "@/api/modules/materialGroup";

const rules = reactive({
  groupCode: [{ required: true, message: "请输入群组编码", trigger: "blur" }],
  groupName: [{ required: true, message: "请输入群组名称", trigger: "blur" }],
  status: [{ required: true, message: "请选择状态", trigger: "change" }]
});

interface DrawerProps {
  title: string;
  isView: boolean;
  row: Partial<MaterialGroup.MaterialGroupListItem>;
  api?: (params: any) => Promise<any>;
  getTableList?: () => void;
}

const drawerVisible = ref(false);
const drawerProps = ref<DrawerProps>({
  isView: false,
  title: "",
  row: {}
});

// 表单引用
const ruleFormRef = ref<FormInstance>();

// 接收父组件参数
const acceptParams = (params: DrawerProps) => {
  drawerProps.value = params;
  drawerVisible.value = true;
  
  // 设置默认值
  if (params.title === "新增") {
    drawerProps.value.row = {
      groupCode: "",
      groupName: "",
      description: "",
      status: "ACTIVE",
      groupType: ""
    };
  }
};

// 提交数据
const handleSubmit = async () => {
  if (!ruleFormRef.value) return;
  
  const valid = await ruleFormRef.value.validate().catch(() => false);
  if (!valid) return;

  try {
    await drawerProps.value.api!(drawerProps.value.row);
    ElMessage.success({ message: `${drawerProps.value.title}物料群组成功！` });
    drawerProps.value.getTableList!();
    drawerVisible.value = false;
  } catch (error) {
    ElMessage.error({ message: `${drawerProps.value.title}物料群组失败！` });
  }
};

defineExpose({
  acceptParams
});
</script>

<style scoped>
.el-drawer__header h4 {
  margin: 0;
  color: #303133;
  font-size: 16px;
  font-weight: 600;
}
</style>